<template>
  <basic-container>
    <div id="record">
      <h3>销售数据</h3>
      <el-date-picker
        v-model="value3"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="search"
        clearable
      >
      </el-date-picker>
      <el-select
        style="margin-left: 10px"
        filterable
        clearable
        placeholder="请选择店铺名称"
        v-model="shopnamevalue"
        @change="search"
      >
        <el-option
          v-for="item in shopkeeper"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        style="margin-left: 10px"
        filterable
        clearable
        placeholder="请选择分成人员"
        v-model="Dividevalue"
        @change="search"
      >
        <el-option
          v-for="item in Divide"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        style="margin-left: 10px"
        filterable
        clearable
        placeholder="请选择商品类型"
        v-model="moldvalue"
        @change="search"
      >
        <el-option
          v-for="item in mold"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <avue-crud ref="crud" :option="option" :data="data" :page="page">
        <template slot="price" slot-scope="{ row }">
          ¥{{ row.price / 100 }}
        </template>
      </avue-crud>
    </div>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import $ from "jquery";
// let baseUrl = "http://192.168.0.220:8091";
let baseUrl = "http://122.51.69.142:8091"; //服务器地址

export default {
  data() {
    return {
      value3: [],
      data: [],
      page: {
        total: 0,
        layout: "total,pager,prev, next",
        background: false,
        pageNum: 1,
        pageSize: 50,
      },
      option: {
        addBtn: false,
        menu: false,
        align: "center",
        menuAlign: "center",
        dialogClickModal:false,
        column: [
          {
            label: "日期",
            prop: "date",
          },
          {
            label: "店铺名称",
            prop: "shopName",
          },
          {
            label: "分成人员",
            prop: "name",
          },
          {
            label: "商品类型",
            prop: "categoryName",
          },
          {
            label: "销售额",
            prop: "price",
          },
        ],
      },
      startTime: "",
      endTime: "",
      shopkeeper: [], //店铺名称下拉框
      shopnamevalue: "", //店铺名称选中数据
      Divide: [], //分成人员下拉框
      Dividevalue: "", //分成人员下选中数据
      mold: [], //分成人员下拉框
      moldvalue: "", //分成人员下选中数据
      tableSelectList: [], // 选中的数据
      tableLabelList: [], //导出表格的表头
      tablePropList: [], //导出表格的行关联信息
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    // 获取店铺名称、分成人员、商品类型
    getDataList() {
      let _this = this;
      // 店铺名称
      _this.userInfo.userInfo.roles[0].shops.forEach((item) => {
        _this.shopkeeper.push({
          value: item.shopId,
          label: item.name,
        });
      });
      // _this.$ajax
      //   .post(`${baseUrl}/pc/getShopList`)
      //   .then(function (res) {
      //     //请求成功
      //     let resData = res.data;
      //     if (resData.code == 200) {
      //       resData.data.forEach((item) => {
      //         _this.shopkeeper.push({
      //           value: item.shopId,
      //           label: item.name,
      //         });
      //       });
      //     } else {
      //       _this.$message.error(resData.msg);
      //     }
      //   })
      //   .catch(function (error) {
      //     //请求失败
      //     console.log(error);
      //   });
      // 分成人员
      _this.$ajax
        .post(`${baseUrl}/pc/getBindablePartnerList`)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            resData.data.forEach((item) => {
              _this.Divide.push({
                value: item.id,
                label: item.name,
              });
            });
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
      // 商品类型
      _this.$ajax
        .post(`${baseUrl}/pc/getCategoryList`)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            resData.data.forEach((item) => {
              _this.mold.push({
                value: item.id,
                label: item.name,
              });
            });
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });

      // 表格数据
      _this.$ajax
        .post(`${baseUrl}/pc/getSaleData`, {
          pageNum: _this.page.pageNum,
          pageSize: _this.page.pageSize,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.page.total = resData.data.count;
            _this.data = resData.data.saleData;
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 搜索事件
    search() {
      let _this = this;
      if (_this.value3 != null) {
        if (_this.value3.length == 0) {
          _this.startTime = "";
          _this.endTime = "";
        } else if (_this.value3.length == 1) {
          _this.$message.error("请选择具体的时间范围");
        } else {
          _this.startTime = _this.value3[0];
          _this.endTime = _this.value3[1];
        }
      } else {
        _this.startTime = "";
        _this.endTime = "";
      }
      _this.page.pageNum = 1;
      _this.$ajax
        .post(`${baseUrl}/pc/getSaleData`, {
          startTime: _this.startTime,
          endTime: _this.endTime,
          shopId: _this.shopnamevalue,
          categoryId: _this.moldvalue,
          partnerId: _this.Dividevalue,
          pageNum: _this.page.pageNum,
          pageSize: _this.page.pageSize,
        })
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            $(".avue-crud__pagination").css("display", "block");
            _this.page.total = resData.data.count;
            _this.data = resData.data.saleData;
          } else {
            $(".avue-crud__pagination").css("display", "none");
            _this.data = [];
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    rowCell(row, index) {
      this.$refs.crud.rowCell(row, index);
    },
    rowSave(form, done) {
      this.$message.success("新增数据" + JSON.stringify(form));
      done();
    },
    rowUpdate(form, index, done) {
      this.$message.success(
        "编辑数据" + JSON.stringify(form) + "数据序号" + index
      );
      done();
    },
    handleRowClick(row) {
      this.$message({
        showClose: true,
        message: "序号" + row.$index,
        type: "success",
      });
    },
    //导出按钮
    openSelExcel(st) {
      let _this = this;
      if (st == 1) {
        if (_this.tableSelectList.length === 0) {
          _this.$message({
            message: "请至少选择一条需要导出的数据",
            type: "warning",
          });
          return;
        }
        _this
          .$confirm("该操作将导出选中的数据，是否继续", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            //导出
            let excelList = _this.tableSelectList;
            console.log(excelList);
            _this.openExcel(excelList);
          })
          .catch(() => {});
      } else {
        _this
          .$confirm("该操作将导出表格中的数据，是否继续", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            //导出

            let excelList = _this.data;
            console.log(excelList);
            _this.openExcel(excelList);
          })
          .catch(() => {});
      }
    },
  },
};
</script>

<style>
#record h3 {
  margin: 20px 0;
}
</style>